<template>
  <div class="product">
    <el-table :data="tabledata" style="width:100%;" :cell-class-name="getCellClass" :border="false">
      <el-table-column
        :label="column.name"
        align="center"
        v-for="(column, index) in columns"
        :key="column.id"
        width="50">
        <template v-slot="{$index}">
          <el-input v-model="form[column.id]" :ref="index" style="width:50px" size="mini"
                    @keyup.native="onChange($event, index)" @focus="onFocus(index)"
                    @input="onInputChange($event, index)" :disabled="disabled"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {extend} from '../object.js'
import chain from '../chain.js'

export default {
  name: 'sp-product-input',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array
    },
    uniq: {
      require: true
    },
    init: {}
  },
  data() {
    let self = this

    let form = {}
    self.columns.forEach(column => {
      form[column.id] = ""
    })

    return {
      form: form,
      tabledata: [[]]
    }
  },
  methods: {
    getCellClass() {
      return "counter"
    },
    // 在 Input 值改变时触发，value是当前值，index是当前索引值
    onInputChange(value, index) {
      const self = this;
      let array = value.split(/\s+/);
      // 一般来说，input有变化会立刻通知，下面的语句不会被执行
      if (array.length > 1) {
        for (let i = index; i < self.columns.length && i < index + array.length; i++) {
          let columnid = self.columns[i].id;
          self.form[columnid] = {
            number: array[i - index],
            rate: 2
          };
        }
      }
    },
    // 如果值有变化，就传递给父页面
    onChange(event, index) {
      let self = this
      let output = []
      if (event.key === 'ArrowRight') {
        self.focus(index + 1)
      } else if (event.key === 'ArrowLeft') {
        self.focus(index - 1)
      } else if (event.key === 'ArrowUp') {
        self.$emit("up", index)
      } else if (event.key === 'ArrowDown') {
        self.$emit("down", index)
      } else {
        // 会进入到这里, 然后传递给父页面
        // 这里我们加入一个新的变量，rate，因为总数需要做乘法运算
        chain(self.form).forEach((number, packing_id) => {
          // 首先取出 columns 中 id = packing_id的那条记录
          let currentIndex = this.columns.findIndex((item) => {
            return item.id === parseInt(packing_id);
          });
          // 如果 number 为空，则赋值为0
          if (!number) {
            number = 0;
          }
          // 添加
          output.push({
            uniq: parseInt(self.uniq),
            packing_id: parseInt(packing_id),
            rate: this.columns[currentIndex].rate,
            number:parseInt(number)
          })
        })

        // 传递给父组件
        self.$emit("change", output)
      }
    },
    focus(index = 0) {
      let target = this.$refs[index];
      if (target && target[0]) {
        target[0].focus();
      }
    },
    startFocus(colIndex) {
      let self = this;
      colIndex = colIndex < self.columns.length ? colIndex : self.columns.length - 1;
      self.focus(colIndex);
    },
    // 在 Input 获得焦点时触发
    onFocus(index) {
      let target = this.$refs[index];
      if (target && target[0]) {
        target[0].select();
      }
    }
  },

  // 渲染前调用
  mounted: function () {
    extend(this.form, this.init)
  }
}
</script>
